<template>
  <el-card v-loading="loading" shadow="never">
    <el-row>
      <span>团队信息</span>
      <el-col class="text-center" style="margin-top: 10px">
        <el-scrollbar height="250px">
          <el-card
            class="contcard"
            v-for="(ele, index) in datas"
            :key="index"
            style="padding: 5px"
            v-loading="loading"
            shadow="never"
          >
            <!-- <el-tag type="success">已完成</el-tag> -->
            <el-tag type="success" class="tag">成员数量{{ ele.user_count }}</el-tag>
            <!-- <el-tag type="danger">未完成</el-tag> -->
            <div class="title">
              <el-avatar
                style="vertical-align: middle"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
              <span class="title_text">团队名称：{{ ele.team_name }}</span>
            </div>
            <div class="people">团队负责人:{{ ele.responsibilityStr }}</div>
          </el-card>
        </el-scrollbar>
      </el-col>
      <el-col>
        <div id="numberEchart" :style="{ height: height + 'px' }"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { teamlist } from '@/api/system/index'

export default {
  name: 'SystemIndexCount',
  data() {
    return {
      loading: false,
      datas: [],
      countNumber: 0,
      percentage: 20,
      customColor: '#409eff',
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  },
  computed: {
    name() {
      return this.$t('common.Count statistic')
    }
  },
  watch: {
    name() {
      this.count()
    }
  },
  created() {
    this.teamlist()
  },
  methods: {
    teamlist() {
      this.loading = true
      teamlist()
        .then((res) => {
          this.datas = res.data.list
          this.countNumber = res.data.count
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style>
.contcard {
  margin-top: 5px;
  position: relative;
  .tag {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .el-card__body {
    padding: 5px;
  }
}
.title {
  text-align: left;
  font-weight: 700;
  font-size: 20px;

  .title_text {
    vertical-align: middle;
  }
}
.people {
  margin: 5px 0;
  text-align: left;
  color: #666;
}
</style>
